<template>
  <div>
    <van-popup v-model:show="pwdShow" position="bottom" closeable close-icon="arrow-left" :style="{ height: '100%',background: 'linear-gradient(0deg, #0E1011, #222222)' }" close-icon-position="top-left">
      <!-- 密码输入框 -->
      <div class="time">
        <p>交易密码用于支付</p>
        <h1>{{formData.tips}}</h1>
      </div>
      <van-password-input :value="formData.pasteResult" :focused="formData.showKeyboard" @focus="formData.showKeyboard = true" :mask="true" v-if="formData.paywarp" />
      <van-password-input :value="formData.repaypwd" :focused="formData.reshowKeyboard" @focus="formData.reshowKeyboard = true" :mask="true" v-if="formData.repaywarp" />
      <!-- 数字键盘 -->
      <van-number-keyboard v-model="formData.pasteResult" :show="formData.showKeyboard" @blur="formData.showKeyboard = false" @input="onInput" />
      <van-number-keyboard v-model="formData.repaypwd" :show="formData.reshowKeyboard" @blur="formData.reshowKeyboard = false" @input="reonInput" />
    </van-popup>
  </div>
</template>
<script>
import { defineComponent, ref, reactive, toRefs } from 'vue'
import { editPayPassword, getCode, imgcode } from "@/api/user";
import { useRouter } from 'vue-router'
import { setLocal } from "@/utils/localStorage";
import { Popup, Toast } from "vant";
import { stringNum } from "@/utils/phone";
export default defineComponent({
  watch: {
    formData: {
      handler(val) {
        console.log(val)
      }
    }
  },
  components: {
    Popup
  },
  props: {
    formData: {
      type: Object,
      default: ''
    }
  },
  setup(props, context) {
    console.log("props===", props, context);
    // const pObj = toRefs(props).name.value.mobile;
    // 
    const router = useRouter()
    const phoneData = toRefs(props).formData
    console.log(phoneData, "phoneData")
    const pwdShow = ref(false)
    const formData = reactive({
      tips: "输入交易密码",
      paywarp: true,
      repaywarp: false,
      repaypwd: "",
      pasteResult: '',
      showKeyboard: true,
      reshowKeyboard: false
    })
    const reonInput = (key) => {
      formData.repaypwd = (formData.repaypwd + key).slice(0, 6);
      console.log(formData.repaypwd)
      if (stringNum(formData.repaypwd) === 6) {
        formData.paywarp = false
        formData.repaywarp = false
        formData.showKeyboard = false
        formData.reshowKeyboard = false
        pwdShow.value = false
        const para = {
          mobile: phoneData.value.mobile,
          verificationCode: phoneData.value.verificationCode,
          payPassword: formData.repaypwd
        }
        if (formData.pasteResult != formData.repaypwd) {
          formData.pasteResult = ""
          formData.repaypwd = ""
          formData.showKeyboard = true
          formData.reshowKeyboard = false
          formData.paywarp = true
          formData.tips = "输入交易密码"
          return Toast('两次密码不一致')
        }
        editPayPassword(para).then(res => {
          if (res.data.success) {
            Toast(res.data.message)
            router.back()
          } else {

            Toast(res.data.message);
            router.back()
          }
          formData.tips = "输入交易密码"
          formData.pasteResult = ""
          formData.repaypwd = ""
          formData.paywarp = true
          formData.repaywarp = false
          formData.showKeyboard = true
          formData.reshowKeyboard = false
          formData.loading = false
        })
      }
    }
    const onInput = (key) => {
      formData.repaypwd = ""
      formData.pasteResult = (formData.pasteResult + key).slice(0, 6);
      console.log(formData.pasteResult)
      let str = stringNum(formData.pasteResult)
      if (stringNum(formData.pasteResult) === 6) {
        formData.tips = "再次输入交易密码"
        formData.paywarp = false
        formData.repaywarp = true
        formData.showKeyboard = false
        formData.reshowKeyboard = true

      }
    }
    return {
      pwdShow,
      onInput,
      formData,
      reonInput
    }
  }
})
</script>
<style lang="less" scoped>
&:deep(.van-password-input__security) {
  i {
    background: #ffffff !important;
  }
}
.time {
  margin: 160px 0px 100px;
  p {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.8;
    text-align: center;
  }
  h1 {
    text-align: center;
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}
&:deep(.van-hairline--surround:after) {
  border-width: 0px;
}
&:deep(.van-hairline--left:after) {
  opacity: 0;
}
&:deep(.van-password-input__item) {
  margin-left: 20px;
  margin: 10px;
  height: 80px;
  background: #282a2c;
  border: 1px solid #ffffff;
  border-radius: 18px;
}
</style>